<template>
  <div class="fanList">
    <Header title="折扇合集"/>
    <!-- <van-image  width="100%"  height="100"  src="https://img01.yzcdn.cn/vant/cat.jpeg" /> -->
      <div class="image"></div>
      <ul class="commodity">
              <p>相关藏品</p>
              <li>
                <div class="left">
                  <van-image :src="require('../../assets/img/info.png')" />
                </div>
                <div class="right">
                  <p class="label ddd">绶带琼枝明黄折扇</p>
                  <p class="comp ddd">元宇宙国际拍卖有限公司</p>
                  <p class="Price">¥ 19.90</p>
                </div>
              </li>
              <li>
                <div class="left">
                  <van-image :src="require('../../assets/img/info.png')" />
                </div>
                <div class="right">
                  <p class="label ddd">绶带琼枝明黄折扇</p>
                  <p class="comp ddd">元宇宙国际拍卖有限公司</p>
                  <p class="Price">¥ 19.90</p>

                </div>
              </li>
              <li>
                <div class="left">
                  <van-image :src="require('../../assets/img/info.png')" />
                </div>
                <div class="right">
                    <p class="label ddd">绶带琼枝明黄折扇</p>
                    <p class="comp ddd">元宇宙国际拍卖有限公司</p>
                    <p class="Price">¥ 19.90</p>
                </div>
              </li>
            </ul>
            <p class="btm">我已经到底了～</p>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'fanList',
  computed: { ...mapGetters({ pageData: 'pageData'}) },
  data () {
    return {
      
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scope>
.fanList {
    width: 100%;
  padding-top: 40px;
  padding-bottom: 20px;
  box-sizing: border-box;
  .image {
    width: 100%;
    height: 500px;
    background-color: pink;
  }
    .commodity {
      width: 100%;
      padding-top: 8px;
      padding: 8px 12px;
      box-sizing: border-box;
      &>p {
        position: relative;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 1;
        padding-left: 10px;
        padding-bottom: 10px;
      }
      li {
        display: block;
        width: 100%;
        height: 100px;
        background: #FFFFFF;
        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 8px;
        box-sizing: border-box;
        margin-bottom: 10px;
        .left {
          float: left;
          width: 86px;
          height: 100%;
        }
        .van-image {
          width: 100%;
          height: 100%;
        }
        .right {
          float: left;
          width: calc(100% - 110px);
          height: 100%;
          padding-left: 12px;
          .label{
            font-size: 15px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 1;
            padding: 5px 0;
          }
          .Price{
            font-size: 16px;
            padding: 4px 0;
            padding-top: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #6B00F0;
            line-height: 1;
            background: linear-gradient(270deg, #E091A9 0%, #9A7FCF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            
          }
          .comp{
              font-size: 12px;
              padding: 6px 0;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
              line-height: 1;
          }
        }
      }
    }
}
</style>
